<template>
	<div class="topBg">
		<div class="fl">
			<div class="quyu">
				<ul class="ulAll">
					<li data-huxi='' class="active">不限</li>
					<li data-huxi='1室'>一室</li>
					<li data-huxi='2室'>二室</li>
					<li data-huxi='3室'>三室</li>
					<li data-huxi='4室'>四室</li>
					<li data-huxi='5室'>五室</li>
					<li data-huxi='1'>五室以上</li>
				</ul>
			</div>
		</div>
		<div class="btn0">
			<button class="reset">重置</button>
			<button class="ok">确定</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
			
			let data = JSON.parse(localStorage.getItem('data'));
			
			if(data && data.screenHuXing){
				$('.ulAll').find('li').each(function(){
					if($(this).attr('data-huxi')==data.screenHuXing){
						$(this).attr('class','active').siblings().attr('class','');
					}
				})
			}
			
			var that = this;
			$('.ulAll').on('click','li',function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
			//请求数据
			$('.ok').click(function(){
				$('.fl').hide();
				var data=JSON.parse(localStorage.getItem('data'));
				var obj0=$('.active').attr('data-huxi');
				data.screenHuXing=obj0;
				
				data.page=1,
				localStorage.setItem('data',JSON.stringify(data));
				that.$router.push({
					path: '/',
					name: 'index',
					query: {
						type: data.houseType
					}
				});
				location.reload();
			})
			
			$('.ul0 li').eq(1).click(function(){
				$('.fl').show();
			})
			$('.reset').click(function(){
				$('.ulAll').find('li').each(function(){
					$(this).attr('class','')
				})
			})
			$('.topBg').click(function(e){
				location.href='#/'
				$('.lbt').slideDown();
			})
			$('.topBg div').click(function(event){
				event.stopPropagation();
			})
		},
		methods: {

		}
	}
</script>
<style scoped>
	.topBg {
		position: absolute;
		width: 100%;
		height: 600px;
		z-index: 999;
		overflow: hidden;
		background-color: rgba(0,0,0,0.3);
	}
	.ul2 {
		display: none;
		height: 240px;
		overflow: auto;
	}
	.fl {
		position: absolute;
		width: 100%;
		height: 240px;
		overflow: auto;
		background-color: #fff;
	}
	
	.quyu {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
	}
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		color: #333;
		width: 100%;
		font-size: 13px;
		border-right: 1px solid #eee;
	}
	
	ul:last-child {
		border: 0;
	}
	
	ul li {
		text-align: left;
		padding-left: 3%;
		line-height: 40px;
	}
	
	ul li.active {
		color: #0186c2;
	}
	
	.btn0 {
		position: absolute;
		width: 100%;
		top: 240px;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-around;
	}
	
	.btn0 button {
		width: 35%;
		margin: 24px 0;
	}
	
	.btn0 button.ok {
		background-color: #0186c2;
		color: #fff;
	}
</style>